<template>
  <div>
    <div v-if="nodeConfig.type==0" class="node-wrap">
      <div class="start-node" style="width:100px;min-height: 25px;">
        <div class="content" style="text-align: center;" @click="setPerson">
          <el-button type="primary">发起流程</el-button>
        </div>
      </div>
      <addNode :child-node-p.sync="nodeConfig.childNode" />
      <!-- <div v-else class="add-node-btn-box" style="height:60px;" /> -->
    </div>
    <div v-if="nodeConfig.type===1 || nodeConfig.type===2 || nodeConfig.type===3 || nodeConfig.type===5 " class="node-wrap">
      <div class="node-wrap-box" :class="(nodeConfig.type==0?'start-node ':'')+(isTried&&nodeConfig.error?'active error':'')">
        <div>
          <div class="title" :style="'background: rgb('+ ['','87, 106, 149','255, 148, 62','50, 150, 250','','62, 155, 255','47, 198, 77','47, 198, 77'][nodeConfig.type] +');'">
            <span v-show="nodeConfig.type==1" class="iconfont icon-shenhe" />
            <span v-show="nodeConfig.type==2" class="iconfont icon-guanliangongzhonghao" />
            <input
              v-if="nodeConfig.type!=0&&isInput"
              v-model="nodeConfig.nodeName"
              v-focus
              type="text"
              class="ant-input editable-title-input"
              :placeholder="placeholderList[nodeConfig.type]"
              @blur="blurEvent()"
              @focus="$event.currentTarget.select()"
            >
            <span v-if="nodeConfig.type!=0&&!isInput" class="editable-title" @click="clickEvent()">{{ nodeConfig.nodeName ||'请设置节点名称' }}</span>
            <i v-if="nodeConfig.type!=0" class="el-icon-error close" @click="delNode()" />
          </div>
          <div class="content flex" @click="setPerson">
            <!-- <div v-if="nodeConfig.type==0" class="text">{{ arrToStr(flowPermission)?arrToStr(flowPermission):'所有人' }}</div> -->
            <div v-if="nodeConfig.type==1" class="text">
              <span v-if="!setApproverStr(nodeConfig)" class="placeholder">请选择{{ placeholderList[nodeConfig.type] }}</span>
              {{ setApproverStr(nodeConfig) }}
            </div>
            <div v-if="nodeConfig.type==2" class="text">
              <span v-if="!copyerStr(nodeConfig)" class="placeholder">请选择{{ placeholderList[nodeConfig.type] }}</span>
              {{ copyerStr(nodeConfig) }}
            </div>
            <div v-if="nodeConfig.type==5 " class="text">
              <span v-if="!setApproverStr(nodeConfig)" class="placeholder">请选择{{ placeholderList[nodeConfig.type] }}</span>
              {{ setApproverStr(nodeConfig) }}
            </div>
            <i v-if="nodeConfig.type!=0" class=" el-icon-arrow-right" />
          </div>
          <div v-if="isTried&&nodeConfig.error" class="error_tip">
            <i class="anticon anticon-exclamation-circle" style="color: rgb(242, 86, 67);" />
          </div>
        </div>
      </div>
      <addNode :child-node-p.sync="nodeConfig.childNode" />
      <!-- <div v-else class="add-node-btn-box" style="height:60px;" /> -->
    </div>
    <div v-if="nodeConfig.type==4" class="branch-wrap">
      <div class="branch-box-wrap">
        <div class="branch-box">
          <button class="add-branch" @click="addTerm">添加条件</button>
          <div v-for="(item,index) in nodeConfig.conditionNodes" :key="index" class="col-box">
            <div class="condition-node">
              <div class="condition-node-box">
                <div class="auto-judge" :class="isTried&&item.error?'error active':''">
                  <div v-if="index!=0" class="sort-left" @click="arrTransfer(index,-1)"><i class="el-icon-d-arrow-left" /></div>
                  <div class="title-wrapper">
                    <input
                      v-if="isInputList[index]"
                      v-model="item.nodeName"
                      v-focus
                      type="text"
                      class="ant-input editable-title-input"
                      @blur="blurEvent(index)"
                      @focus="$event.currentTarget.select()"
                    >
                    <span v-if="!isInputList[index]" class="editable-title" @click="clickEvent(index)">{{ item.nodeName }}</span>
                    <span class="priority-title" @click="setPerson(item.priorityLevel)">优先级{{ item.priorityLevel }}</span>
                    <i class=" el-icon-error close" @click="delTerm(index)" />
                  </div>
                  <div
                    v-if="index!=nodeConfig.conditionNodes.length-1"
                    class="sort-right"
                    @click="arrTransfer(index)"
                  ><i class="el-icon-d-arrow-right" /></div>
                  <div class="content" @click="setPerson(item.priorityLevel)">{{ conditionStr(item,index) }}</div>
                  <div v-if="isTried&&item.error" class="error_tip">
                    <i class="anticon anticon-exclamation-circle" style="color: rgb(242, 86, 67);" />
                  </div>
                </div>
                <addNode :child-node-p.sync="item.childNode" />
              </div>
            </div>
            <nodeWrap
              v-if="item.childNode && item.childNode"
              :node-config.sync="item.childNode"
              :table-id="tableId"
              :is-tried.sync="isTried"
              :director-max-level="directorMaxLevel"
              :form-data="formData"
              :scheme-type="schemeType"
            />
            <div v-if="index==0" class="top-left-cover-line" />
            <div v-if="index==0" class="bottom-left-cover-line" />
            <div v-if="index==nodeConfig.conditionNodes.length-1" class="top-right-cover-line" />
            <div v-if="index==nodeConfig.conditionNodes.length-1" class="bottom-right-cover-line" />
          </div>
        </div>
        <addNode :child-node-p.sync="nodeConfig.childNode" />
      </div>
    </div>
    <div v-if="nodeConfig.type===6 || nodeConfig.type===7" class="node-wrap">
      <div class="node-wrap-box" :class="(nodeConfig.type==0?'start-node ':'')+(isTried&&nodeConfig.error?'active error':'')">
        <div>
          <div class="title" :style="'background: rgb('+ ['','87, 106, 149','255, 148, 62','50, 150, 250','','62, 155, 255','47, 198, 77','47, 198, 77'][nodeConfig.type] +');'">
            <input
              v-if="nodeConfig.type!=0&&isInput"
              v-model="nodeConfig.nodeName"
              v-focus
              type="text"
              class="ant-input editable-title-input"
              :placeholder="placeholderList[nodeConfig.type]"
              @blur="blurEvent()"
              @focus="$event.currentTarget.select()"
            >
            <span v-if="nodeConfig.type!=0&&!isInput" class="editable-title" @click="clickEvent()">{{ nodeConfig.nodeName||'请设置节点名称' }}</span>
            <i v-if="nodeConfig.type!=0" class="el-icon-error close" @click="delNode()" />
          </div>
          <div class="content flex" @click="setPerson">
            <div v-if="nodeConfig.type==6 || nodeConfig.type==7" class="text">
              <span v-if="!setApproverStr(nodeConfig)" class="placeholder">请选择{{ placeholderList[nodeConfig.type] }}</span>
              {{ setApproverStr(nodeConfig) }}
            </div>
            <i v-if="nodeConfig.type!=0" class=" el-icon-arrow-right" />
          </div>
          <div v-if="isTried&&nodeConfig.error" class="error_tip">
            <i class="anticon anticon-exclamation-circle" style="color: rgb(242, 86, 67);" />
          </div>
        </div>
      </div>
      <div class="add-node-btn-box" style="height:60px;" />
    </div>
    <div v-if="nodeConfig.type===99 " class="node-wrap">
      <div>
        <el-tag effect="dark" style="padding: 5px 15px;"> {{ nodeConfig.nodeName||'流程结束' }} </el-tag>
      </div>
    </div>
    <el-drawer
      :visible.sync="approverDrawer"
      direction="rtl"
      :append-to-body="true"
      class="set_promoter"
      size="40%"
      :before-close="saveApprover"
      :with-header="false"
    >
      <el-container>
        <el-header>
          <div>{{ approverConfig.nodeName }}设置</div>
        </el-header>
        <el-tabs type="card">
          <el-tab-pane v-if="approverConfig.type!=0" label="审批设置">
            <el-main>
              <div class="approver_content ">
                <div class="drawer-title"><i class="el-icon-s-operation blue" /><span class="red">*</span>节点名称</div>
                <div class="padding-lr">
                  <el-input v-model="approverConfig.nodeName" />
                </div>
              </div>
              <div class="approver_content ">
                <div class="drawer-title"><i class=" el-icon-s-operation blue" />指定方式</div>
                <div class="padding-lr">
                  <el-radio-group v-model="approverConfig.settype" class="clear margin-left-sm" @change="changeType">
                    <el-radio :label="1">指定成员</el-radio>
                    <el-radio :label="2">上级主管</el-radio>
                    <el-radio :label="4">发起人自选</el-radio>
                    <!-- <el-radio :label="5">发起人自己</el-radio> -->
                    <!-- <el-radio :label="7">连续多级主管</el-radio> -->
                    <!-- <el-radio :label="8">项目负责人</el-radio> -->
                    <el-radio :label="9">指定角色</el-radio>
                    <el-radio :label="10">来自流程</el-radio>
                  </el-radio-group>
                </div>
              </div>
              <div class="approver_detail">
                <i class="el-icon-caret-top  caret" />
                <div v-if="approverConfig.settype==1">
                  <el-button type="text" @click="showSelectPersonDialog"><i class="iconfont icon-jiaren" /> 添加/修改成员</el-button>
                  <a v-if="approverConfig.nodeUserList.length!=0" class="text-sm gray margin-left" @click="approverConfig.nodeUserList=[]">清空</a>
                  <p v-if="approverConfig.settype==1 && approverConfig.nodeUserList.length!=0" class="selected_list">
                    <el-tag v-for="(item,index) in approverConfig.nodeUserList" :key="index">{{ item.name }}
                      <i class="el-icon-error" @click="removeEle(approverConfig.nodeUserList,item,'targetId')" /></el-tag>

                  </p>
                </div>
                <div v-if="approverConfig.settype==2" class="approver_manager  text-normal padding-lr">
                  <div class="flex-start">
                    由流程上的
                    <div style="width:100px" class="margin-lr-sm">
                      <el-select v-model="approverConfig.selectBill" size="mini">
                        <el-option label="填单人" value="createuser">填单人</el-option>
                        <el-option label="申请人" value="applyuser">申请人</el-option>
                      </el-select>
                    </div>
                    的主管进行审批。
                  </div>
                  <p class="tip">找不到主管时，由上级主管代审批</p>
                </div>
                <div v-if="approverConfig.settype==5" class="approver_self">
                  <p>该审批节点设置“发起人自己”后，审批人默认为发起人</p>
                </div>
                <div v-show="approverConfig.settype==4" class="approver_self_select">
                  <!-- <el-radio-group v-model="approverConfig.selectMode" style="width: 100%;">
              <el-radio :label="1">选一个人</el-radio>
              <el-radio :label="2">选多个人</el-radio>
            </el-radio-group> -->
                  <h3>选择范围</h3>
                  <el-radio-group v-model="approverConfig.selectRange" style="width: 100%;" @change="changeRange">
                    <el-radio :label="1">全公司</el-radio>
                    <el-radio :label="2">指定成员</el-radio>
                    <el-radio :label="3">指定角色</el-radio>
                  </el-radio-group>
                  <el-button v-if="approverConfig.selectRange==2" size="mini" type="text" @click="showSelectPersonDialog"><i class="iconfont icon-jiaren" />添加/修改成员</el-button>
                  <el-button v-if="approverConfig.selectRange==3" size="mini" type="text" @click="addRoleApprover"><i class="iconfont icon-guanliyuan" />添加/修改角色</el-button>
                  <a v-if="(approverConfig.selectRange==2||approverConfig.selectRange==3)&&approverConfig.nodeUserList.length!=0&&approverConfig.selectRange!=1" class="text-sm gray margin-left" @click="approverConfig.nodeUserList=[]">清除</a>
                  <p v-if="(approverConfig.selectRange==2||approverConfig.selectRange==3)&&approverConfig.nodeUserList.length!=0&&approverConfig.selectRange!=1" class="selected_list">
                    <el-tag v-for="(item,index) in approverConfig.nodeUserList" :key="index">{{ item.name }}
                      <i class="el-icon-error" @click="removeEle(approverConfig.nodeUserList,item,'targetId')" />
                    </el-tag>

                  </p>
                </div>
                <!-- <div v-if="approverConfig.settype==7" class="approver_manager">
            <p>审批终点</p>
            <p style="padding-bottom:20px">
              <span>发起人的</span>
              <select v-model="approverConfig.examineEndDirectorLevel">
                <option v-for="item in directorMaxLevel" :key="item" :value="item">{{ item==1?'最高':'第'+item }}层级主管</option>
              </select>
            </p>
          </div> -->
                <div v-if="approverConfig.settype==2||approverConfig.settype==7" class="approver_some  text-normal">
                  <p>审批人为空时</p>
                  <el-radio-group v-model="approverConfig.noHanderAction" style="margin-left:100px;margin-top:-55px;">
                    <el-radio :label="1">转交给系统管理员</el-radio>
                    <!-- <br>
                <el-radio :label="2">自动审批通过/不允许发起</el-radio> -->
                  </el-radio-group>
                </div>
                <!-- <div v-if="approverConfig.settype===8" class="approver_some">
              <p class="bold">选择项目</p>
              <el-select v-model="approverConfig.selectProject">
                <el-option v-for="p in projects" :key="p.Id" :label="p.ProjectName" :value="p.Id" />
              </el-select>
            </div> -->
                <div v-if="approverConfig.settype===9" class="approver_some">
                  <el-button size="mini" type="text" @click="addRoleApprover"><i class="iconfont icon-guanliyuan" />添加/修改角色</el-button>
                  <a v-if="approverConfig.nodeUserList.length!=0&&approverConfig.selectRange!=1" class="text-sm gray margin-left" @click="approverConfig.nodeUserList=[]">清除</a>
                  <p v-if="approverConfig.nodeUserList.length!=0&&approverConfig.selectRange!=1" class="selected_list">
                    <el-tag v-for="(item,index) in approverConfig.nodeUserList" :key="index">{{ item.name }}
                      <i class="el-icon-error" @click="removeEle(approverConfig.nodeUserList,item,'targetId')" /></el-tag>

                  </p>
                </div>

                <div v-if="approverConfig.settype===10" class="approver_some">
                  <p>流程上的</p>
                  <el-select v-model="approverConfig.selectBill">
                    <el-option label="填单人" value="createuser">填单人</el-option>
                    <el-option label="申请人" value="applyuser">申请人</el-option>
                  </el-select>
                </div>
              </div>
              <div class="approver_some ">
                <div class="drawer-title"><i class=" el-icon-s-operation blue" />多人审批时采用的审批方式</div>

                <el-radio-group v-model="approverConfig.examineMode" class="clear margin-left">
                  <el-radio :label="1">或签(一名审批人同意或拒绝即可)</el-radio>
                  <br>
                  <el-radio :label="2">会签(须所有审批人同意)</el-radio>
                </el-radio-group>
              </div>
              <div class="approver_some">
                <div class="drawer-title"><i class=" el-icon-s-operation blue" />其他设置</div>
                <el-checkbox v-model="approverConfig.autoPass" :true-label="1" :false-label="0" :label="1" class=" margin-left margin-bottom-sm">当审批人在前面节点审批过或与申请人是同一人时，自动通过</el-checkbox>
              </div>
            </el-main>
          </el-tab-pane>
        </el-tabs>
        <el-footer class="demo-drawer__footer clear">
          <div>
            <el-button @click="approverDrawer = false">返回</el-button>
            <el-button type="primary" @click="saveApprover">确定</el-button>
          </div>
        </el-footer>
        <el-dialog title="选择角色" :visible.sync="approverRoleVisible" width="600px" append-to-body class="promoter_person">
          <el-container>
            <el-main class="flex">
              <div class="person_tree l">
                <input v-model="approverRoleSearchName" type="text" placeholder="搜索角色" @input="filterRole">
                <ul>
                  <li
                    v-for="item in roles"
                    :key="item.Id"
                    class="check_box not"
                    :class="toggleClass(roleList,item,'Id')&&'active'"
                    @click="roleList=[item]"
                  >
                    <a :title="item.Remark"><img src="~@/assets/images/icon_role.png">{{ item.Name }}</a>
                  </li>
                </ul>
              </div>
              <div class="has_selected l">
                <p class="clear">已选（{{ roleList.length }}）
                  <a @click="roleList=[]">清空</a>
                </p>
                <ul>
                  <li v-for="item in roleList" :key="item.Id">
                    <img src="~@/assets/images/icon_role.png">
                    <span>{{ item.Name }}</span>
                    <img src="~@/assets/images/cancel.png" @click="removeEle(roleList,item,'Id')">
                  </li>
                </ul>
              </div>
            </el-main>
            <el-footer class="demo-drawer__footer clear">
              <div>
                <el-button @click="approverRoleVisible = false">返回</el-button>
                <el-button type="primary" @click="sureApprover">确定</el-button>
              </div>
            </el-footer>
          </el-container>
        </el-dialog>

      </el-container>
    </el-drawer>
    <el-drawer
      :visible.sync="financeDrawer"
      direction="rtl"
      :append-to-body="true"
      class="set_promoter"
      size="40%"
      :before-close="saveFinance"
      :with-header="false"
    >
      <el-container>
        <el-header>
          <div>{{ approverConfig.nodeName }}设置</div>
        </el-header>
        <el-main>
          <div class="approver_content ">
            <div class="drawer-title"><i class=" el-icon-s-operation blue" />指定方式</div>
            <div class="padding-lr">
              <el-radio-group v-model="approverConfig.settype" class="clear margin-left-sm" @change="changeType">
                <el-radio v-if="nodeConfig.type==6" :label="1">指定成员</el-radio>
                <el-radio v-if="nodeConfig.type==7" :label="11">全部出纳</el-radio>
                <el-radio :label="12">职责分工</el-radio>
              </el-radio-group>
            </div>
          </div>
          <div v-if="approverConfig.settype===1 ||approverConfig.settype===12" class="approver_detail">
            <i class="el-icon-caret-top  caret" />
            <div v-if="approverConfig.settype==1">
              <el-button type="text" @click="showSelectPersonDialog"><i class="iconfont icon-jiaren" /> 添加/修改成员</el-button>
              <a v-if="approverConfig.nodeUserList.length!=0" class="text-sm gray margin-left" @click="approverConfig.nodeUserList=[]">清空</a>
              <p v-if="approverConfig.settype==1 && approverConfig.nodeUserList.length!=0" class="selected_list">
                <el-tag v-for="(item,index) in approverConfig.nodeUserList" :key="index">{{ item.name }}
                  <i class="el-icon-error" @click="removeEle(approverConfig.nodeUserList,item,'targetId')" /></el-tag>
              </p>
            </div>
            <div v-if="approverConfig.settype===12" class="approver_some">
              <p class="bold">选择方案</p>
              <el-select v-model="approverConfig.divisionSchemeId">
                <el-option v-for="p in DivisionSchemes" :key="p.Id" :label="p.Name" :value="p.Id" />
              </el-select>
              <el-button type="text" @click="showDivisionSchemeDialog(0)"> 添加</el-button>
              <el-button v-if="DivisionSchemes.length>0" type="text" @click="showDivisionSchemeDialog(1)"> 编辑</el-button>
              <el-button v-if="DivisionSchemes.length>0" type="text" @click="delDivisionScheme"> 删除</el-button>
            </div>
          </div>
          <!-- <div class="approver_some">
            <div class="drawer-title"><i class=" el-icon-s-operation blue" />其他设置</div>
            <el-checkbox :label="1" class=" margin-left margin-bottom-sm">当审批人和申报人是同一人时，自动通过</el-checkbox>
            <br>
            <el-checkbox :label="1" class=" margin-left margin-bottom-sm">当审批人在前面节点审批过或申报人是同一人时，自动通过</el-checkbox>
          </div> -->
        </el-main>
        <el-footer class="demo-drawer__footer clear">
          <div>
            <el-button @click="financeDrawer = false">返回</el-button>
            <el-button type="primary" @click="saveFinance">确定</el-button>
          </div>
        </el-footer>
        <el-dialog title="分工方案" :visible.sync="divisionSchemesVisible" width="800px" append-to-body class="promoter_person">
          <el-container>
            <el-main>
              <el-form ref="divisionSchemeForm" :model="divisionSchemesConfig">
                <el-form-item label-width="80px" label="方案名称" prop="Name" :rules="[{ required: true, message: '方案名称不能为空', trigger: 'blur'}]">
                  <el-row type="flex" justify="space-between">
                    <el-col :span="24">
                      <el-input v-model="divisionSchemesConfig.Name" placeholder="请输入方案名称" />
                    </el-col>
                  </el-row>
                </el-form-item>
                <el-divider />
                <el-form-item>
                  <div class="flex text-normal">
                    <p class="flex-sub padding-lr-sm">方案配置</p>
                    <el-button class="flex-sub" type="text" @click="addDivisionSchemeCondition"><i class="el-icon-plus" /> 添加分工</el-button>
                  </div>
                </el-form-item>
                <el-divider />
              </el-form>
              <div class="flex text-normal" style="height:400px;">
                <div class="flex-sub padding-lr-sm" style="height:100%;padding: 0px">
                  <div class="condition-group" style="height:358px;overflow-y:auto;margin:0;padding-left: 0px">
                    <el-table
                      :data="divisionSchemesConfig.Condition"
                      style="width: 100%;margin-bottom: 20px;"
                      row-key="id"
                      default-expand-all
                    >
                      <el-table-column prop="name" label="名称" width="120px" />
                      <el-table-column prop="conditions" label="满足该条件时" width="200px">
                        <template slot-scope="scope">
                          <el-tooltip v-if="scope.row.isDefault===1" class="item" effect="dark" content="其他分工条件不满足时，进入默认分工" placement="top-start">
                            <span style="overflow: hidden; text-overflow:ellipsis; white-space: nowrap;">其他分工条件不满足时，进入默认分工</span>
                          </el-tooltip>
                          <el-button v-else type="text" @click="setDivisionSchemesConditions(scope.row)">{{ scope.row.conditions.length>0?"查看条件":"配置条件" }}</el-button>
                        </template>
                      </el-table-column>
                      <el-table-column prop="users" label="由此人员执行" header-align="center">
                        <template slot-scope="scope" style="text-align:center">
                          <el-button type="text" @click="chooseDivisionSchemesUser(scope.row)"><el-tag v-for="u in scope.row.users" :key="u.id" style="margin-right:5px;">{{ u.name }}</el-tag><el-tag v-if="scope.row.users.length<1">未选择人员</el-tag></el-button>
                        </template>
                      </el-table-column>
                      <el-table-column header-align="center">
                        <template slot-scope="scope" style="text-align:center">
                          <el-button v-if="scope.row.isDefault!==1" type="text" @click="removeDivisionSchemes(scope.$index)">移除</el-button>
                        </template>
                      </el-table-column>
                    </el-table>
                  </div>
                </div>
              </div>
            </el-main>
            <el-footer class="demo-drawer__footer clear">
              <div>
                <el-button @click="divisionSchemesVisible = false">返回</el-button>
                <el-button type="primary" @click="sureDivisionSchemes">确定</el-button>
              </div>
            </el-footer>
          </el-container>
        </el-dialog>

      </el-container>
    </el-drawer>

    <el-dialog title="抄送人设置" :visible.sync="copyerDrawer" :append-to-body="true" direction="rtl" class="set_copyer" size="550px" :before-close="saveCopyer">
      <div class="demo-drawer__content">
        <div class="copyer_content drawer_content">
          <el-button plain size="small" type="primary" @click="addCopyer"><i class="el-icon-plus" />添加抄送</el-button>
          <p class="selected_list">
            <el-tag
              v-for="tag in copyerConfig.nodeUserList"
              :key="tag.targetId"
              closable
              :type="
                tag.type === 1
                  ? 'warning'
                  : tag.type === 2
                    ? 'success'
                    : 'danger'
              "
              style="margin: 10px"
              @close="removeEle(copyerConfig.nodeUserList,tag,'targetId')"
            >
              {{ tag.name }}
            </el-tag>
            <a v-if="copyerConfig.nodeUserList&&copyerConfig.nodeUserList.length!=0" @click="copyerConfig.nodeUserList=[]">清除</a>
          </p>
          <!-- <el-checkbox-group v-model="ccSelfSelectFlag" class="clear">
            <el-checkbox :label="1">允许发起人自选抄送人</el-checkbox>
          </el-checkbox-group> -->
        </div>
        <el-footer>
          <div>
            <el-button @click="copyerDrawer = false">返回</el-button>
            <el-button type="primary" @click="saveCopyer">确定</el-button>
          </div>
        </el-footer>
      </div>
    </el-dialog>
    <el-dialog title="条件设置" :visible.sync="conditionDrawer" :append-to-body="true" direction="rtl" class="condition_copyer" size="550px" :before-close="closeConditionDrawer">
      <div class=" drawer_content">
        <el-form>
          <el-form-item label-width="80px">
            <el-row type="flex" justify="space-between">
              <el-col :span="16">
                <!-- <el-input v-model="conditionConfig.Title" placeholder="请输入条件名称" /> -->
              </el-col>
              <el-col :span="7">
                <el-select v-model="conditionConfig.priorityLevel" placeholder="请选择">
                  <el-option
                    v-for="item in conditionsConfig.conditionNodes.length"
                    :key="item"
                    :label="'优先级'+item"
                    :value="item"
                  />
                </el-select>
              </el-col>
            </el-row>
          </el-form-item>
          <el-divider />
          <el-form-item>
            <el-radio-group v-model="conditionConfig.conditionModel">
              <el-radio :label="1">配置条件</el-radio>
              <el-radio :label="2">不满足其他分支条件时，进入该分支</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-divider />
        </el-form>
        <div v-if="conditionConfig.conditionModel==1" class="flex text-normal" style="height:400px;">
          <div class="flex-sub padding-lr-sm" style="border-right:1px solid #eee;height:100%;">

            <div class="border-bottom">
              <el-button type="text" :disabled="currCondition.conditionType==1" @click="addCondition"><i class="el-icon-plus" />条件</el-button>
              <el-button type="text" :disabled="currCondition.conditionType==1" @click="addConditionGroup"><i class="el-icon-plus" />条件组</el-button>
            </div>
            <div class="condition-group" style="height:358px;overflow-y:auto;margin:0;">
              <el-table
                :data="conditionConfig.conditionList"
                style="width: 100%;margin-bottom: 20px;"
                row-key="id"
                :show-header="false"
                default-expand-all
                :tree-props="{children: 'Children', hasChildren: 'hasChildren'}"
                @row-click="conditionRowclick"
              >
                <el-table-column
                  class-name="flex"
                  sortable
                >
                  <template slot-scope="scope">
                    <span v-if="scope.row.conditionType==1 " style="font-size:14px">
                      <span :class="scope.row.error?'el-icon-error red':'el-icon-success green'" />
                      {{ scope.row.field.label||'--' }}
                      <span class="padding-lr-sm">   {{ scope.row.relation.label||'?' }}</span>
                      <span v-if="typeof scope.row.value =='object' " class="padding-lr-sm"> ...共<span class="padding-lr-sm blue">{{ scope.row.value.length||0 }}</span>项</span>
                      <span v-else-if="scope.row.value =='0'||scope.row.value ===''" class="padding-lr-sm"> ?</span>
                      <span v-else class="padding-lr-sm"> {{ scope.row.value }}</span>
                    </span>
                    <span v-else> <span :class="scope.row.relation=='&'?'el-icon-s-grid':'el-icon-s-operation'" />{{ scope.row.relation=='&'?'满足所有':'满足任一' }}  </span>
                    <div @click.stop><span v-if="scope.$index!==0" class="el-icon-error close" @click.stop="removeCondition(scope.row,conditionConfig.conditionList)" /></div>
                  </template>

                </el-table-column>

              </el-table>
            </div>
          </div>
          <div class="flex-sub padding-lr-sm" style="height:100%;line-height:42px;">
            <div class="border-bottom">
              配置条件
            </div>
            <el-form class="margin-top-sm" style="height:358px;overflow-y:auto">
              <div v-if="currCondition.conditionType==1">
                <el-form-item label="条件选项" label-width="100px" class=" margin-bottom-sm">
                  <el-select :value="currCondition.field.value" placeholder="请选择条件" @change="conditionColumnChange">
                    <el-option
                      v-for="fd in formData"
                      v-show="Object.keys(fd).indexOf('conditionOptions')>=0"
                      :key="fd.model"
                      :label="fd.name"
                      :value="fd.model"
                    />
                  </el-select>
                </el-form-item>
                <el-form-item v-show="currColumn.conditionOptions && currColumn.conditionOptions.length>0" label="关系" label-width="100px" class=" margin-bottom-sm">
                  <el-select v-model="currCondition.relation">
                    <el-option
                      v-for="co in currColumn.conditionOptions"
                      :key="co.value"
                      :label="co.label"
                      :value="co"
                    />
                  </el-select>
                </el-form-item>
                <div v-show="currColumn.conditionOptions && currColumn.conditionOptions.length>0">
                  <el-form-item v-if="currColumn.objtype=='personobj'" label="对象" label-width="100px" class=" margin-bottom-sm">
                    <el-tag
                      v-for="tag in currCondition.value"
                      :key="tag.value"
                      style="margin: 10px"
                    >
                      {{ tag.label }}
                    </el-tag>
                    <el-button size="mini" type="primary" plain @click="choosePerson"> <i class="el-icon-connection" />选择</el-button>
                  </el-form-item>
                  <el-form-item v-if="currColumn.objtype=='departobj'" label="对象" label-width="100px" class=" margin-bottom-sm">
                    <el-tag
                      v-for="tag in currCondition.value"
                      :key="tag.value"
                      style="margin: 10px"
                    >
                      {{ tag.label }}
                    </el-tag><el-button size="mini" type="primary" plain @click="chooseDepart"> <i class="el-icon-connection" />选择</el-button>
                  </el-form-item>
                  <el-form-item v-if="currColumn.objtype=='string'" label="值" label-width="100px" class=" margin-bottom-sm">
                    <el-input v-model="currCondition.value" type="text" />
                  </el-form-item>
                  <el-form-item v-if="currColumn.objtype=='int'" label="值" label-width="100px" class=" margin-bottom-sm">
                    <el-input-number v-model="currCondition.value" controls-position="right" :precision="2" :min="0" />
                  </el-form-item>
                  <el-form-item v-if="currColumn.objtype=='float'" label="值" label-width="100px" class=" margin-bottom-sm">
                    <el-input-number v-model="currCondition.value" controls-position="right" :precision="2" :min="0" />
                  </el-form-item>
                </div>
              </div>
              <div v-else>
                <el-form-item label="组合类型" label-width="100px" class=" margin-bottom-sm">
                  <el-select v-model="currCondition.relation">
                    <el-option label="满足所有" :value="'&'" />
                    <el-option label="满足任一" :value="'|'" />
                  </el-select>
                </el-form-item>
              </div>
            </el-form>
          </div>
        </div>
        <div v-else>
          <span>无需配置条件</span>
        </div>
        <el-footer>
          <div>
            <el-button @click="closeConditionDrawer">返回</el-button>
            <el-button type="primary" @click="saveCondition">确定</el-button>
          </div>
        </el-footer>
      </div>
    </el-dialog>
    <el-dialog title="分工条件设置" :visible.sync="divisionSchemesConditionDrawer" :append-to-body="true" direction="rtl" class="condition_copyer" size="550px" :before-close="closeDivisionSchemesConditionDrawer">
      <div class=" drawer_content">
        <el-form>
          <el-form-item label-width="80px" label="条件名称">
            <el-row type="flex" justify="space-between">
              <el-col :span="16">
                <el-input v-model="divisionSchemesConditionConfig.name" placeholder="请输入条件名称" />
              </el-col>
            </el-row>
          </el-form-item>
          <el-divider />
        </el-form>
        <div class="flex text-normal" style="height:400px;">
          <div class="flex-sub padding-lr-sm" style="border-right:1px solid #eee;height:100%;">

            <div class="border-bottom">
              <el-button type="text" :disabled="currCondition.conditionType==1" @click="addCondition"><i class="el-icon-plus" />条件</el-button>
              <el-button type="text" :disabled="currCondition.conditionType==1" @click="addConditionGroup"><i class="el-icon-plus" />条件组</el-button>
            </div>
            <div class="condition-group" style="height:358px;overflow-y:auto;margin:0;">
              <el-table
                :data="divisionSchemesConditions"
                style="width: 100%;margin-bottom: 20px;"
                row-key="id"
                :show-header="false"
                default-expand-all
                :tree-props="{children: 'Children', hasChildren: 'hasChildren'}"
                @row-click="conditionRowclick"
              >
                <el-table-column
                  class-name="flex"
                  sortable
                >
                  <template slot-scope="scope">
                    <span v-if="scope.row.conditionType==1 " style="font-size:14px">
                      <span :class="scope.row.error?'el-icon-error red':'el-icon-success green'" />
                      {{ scope.row.field.label||'--' }}
                      <span class="padding-lr-sm">   {{ scope.row.relation.label||'?' }}</span>
                      <span v-if="typeof scope.row.value =='object' " class="padding-lr-sm"> ...共<span class="padding-lr-sm blue">{{ scope.row.value.length||0 }}</span>项</span>
                      <span v-else-if="scope.row.value =='0'||scope.row.value ===''" class="padding-lr-sm"> ?</span>
                      <span v-else class="padding-lr-sm"> {{ scope.row.value }}</span>
                    </span>
                    <span v-else> <span :class="scope.row.relation=='&'?'el-icon-s-grid':'el-icon-s-operation'" />{{ scope.row.relation=='&'?'满足所有':'满足任一' }}  </span>
                    <div @click.stop><span v-if="scope.$index!==0" class="el-icon-error close" @click.stop="removeCondition(scope.row,conditionConfig.conditionList)" /></div>
                  </template>

                </el-table-column>

              </el-table>
            </div>
          </div>
          <div class="flex-sub padding-lr-sm" style="height:100%;line-height:42px;">
            <div class="border-bottom">
              配置条件
            </div>
            <el-form class="margin-top-sm" style="height:358px;overflow-y:auto">
              <div v-if="currCondition.conditionType==1">
                <el-form-item label="条件选项" label-width="100px" class=" margin-bottom-sm">
                  <el-select :value="currCondition.field.value" placeholder="请选择条件" @change="conditionColumnChange">
                    <el-option
                      v-for="fd in formData"
                      v-show="Object.keys(fd).indexOf('conditionOptions')>=0"
                      :key="fd.model"
                      :label="fd.name"
                      :value="fd.model"
                    />
                  </el-select>
                </el-form-item>
                <el-form-item v-show="currColumn.conditionOptions && currColumn.conditionOptions.length>0" label="关系" label-width="100px" class=" margin-bottom-sm">
                  <el-select v-model="currCondition.relation">
                    <el-option
                      v-for="co in currColumn.conditionOptions"
                      :key="co.value"
                      :label="co.label"
                      :value="co"
                    />
                  </el-select>
                </el-form-item>
                <div v-show="currColumn.conditionOptions && currColumn.conditionOptions.length>0">
                  <el-form-item v-if="currColumn.objtype=='personobj'" label="对象" label-width="100px" class=" margin-bottom-sm">
                    <el-tag
                      v-for="tag in currCondition.value"
                      :key="tag.value"
                      style="margin: 10px"
                    >
                      {{ tag.label }}
                    </el-tag>
                    <el-button size="mini" type="primary" plain @click="choosePerson"> <i class="el-icon-connection" />选择</el-button>
                  </el-form-item>
                  <el-form-item v-if="currColumn.objtype=='departobj'" label="对象" label-width="100px" class=" margin-bottom-sm">
                    <el-tag
                      v-for="tag in currCondition.value"
                      :key="tag.value"
                      style="margin: 10px"
                    >
                      {{ tag.label }}
                    </el-tag><el-button size="mini" type="primary" plain @click="chooseDepart"> <i class="el-icon-connection" />选择</el-button>
                  </el-form-item>
                  <el-form-item v-if="currColumn.objtype=='string'" label="值" label-width="100px" class=" margin-bottom-sm">
                    <el-input v-model="currCondition.value" type="text" />
                  </el-form-item>
                  <el-form-item v-if="currColumn.objtype=='int'" label="值" label-width="100px" class=" margin-bottom-sm">
                    <el-input-number v-model="currCondition.value" controls-position="right" :precision="2" :min="0" />
                  </el-form-item>
                  <el-form-item v-if="currColumn.objtype=='float'" label="值" label-width="100px" class=" margin-bottom-sm">
                    <el-input-number v-model="currCondition.value" controls-position="right" :precision="2" :min="0" />
                  </el-form-item>
                </div>
              </div>
              <div v-else>
                <el-form-item label="组合类型" label-width="100px" class=" margin-bottom-sm">
                  <el-select v-model="currCondition.relation">
                    <el-option label="满足所有" :value="'&'" />
                    <el-option label="满足任一" :value="'|'" />
                  </el-select>
                </el-form-item>
              </div>
            </el-form>
          </div>
        </div>
        <el-footer>
          <div>
            <el-button @click="closeDivisionSchemesConditionDrawer">返回</el-button>
            <el-button type="primary" @click="saveDivisionSchemesCondition">确定</el-button>
          </div>
        </el-footer>
      </div>
    </el-dialog>
    <nodeWrap
      v-if="nodeConfig.childNode && nodeConfig.childNode"
      :node-config.sync="nodeConfig.childNode"
      :table-id="tableId"
      :is-tried.sync="isTried"
      :director-max-level="directorMaxLevel"
      :form-data="formData"
      :scheme-type="schemeType"
    />

    <selectPerson ref="selectPersonDialog" :echo-list="approverEmplyessList" @allSelect="chooseUser" />
    <selectDepartment ref="selectdepartmentdialog" :echo-list="conditionDepartmentList" @submitSelect="departChooseBack" />
    <selectAllInOne ref="selectallinonedialog" :echo-list="copyerEmployessList" @allSelect="sureCopyer" />

  </div>
</template>
<script>
import selectPerson from '@/views/components/permissions/selectperson'
import selectDepartment from '@/views/components/selectdepartment'
import selectAllInOne from '@/views/components/permissions/selectpersonroledepartment'
import { getDivisionSchemes, editDivisionSchemes, delDivisionScheme } from '@/api/flow/divisionscheme'
import { getUnitFlowRoles } from '@/api/sysrole/sysrole'
import { guidN } from '@/utils/index'
export default {
  components: { selectPerson, selectDepartment, selectAllInOne },
  props: ['nodeConfig', 'flowPermission', 'directorMaxLevel', 'isTried', 'tableId', 'formData', 'schemeType'],
  data() {
    return {
      placeholderList: ['发起人', '审批节点', '抄送人', '', '', '审核人', '签收人', '出纳'], // 节点类型
      isInputList: [],
      isInput: false,
      departments: {},
      checkedDepartmentList: [],
      checkedEmployessList: [],
      promoterSearchName: '',
      flowPermission1: [],
      approverDrawer: false, // 审批配置抽屉
      approverRoleVisible: false, // 角色
      approverConfig: {}, // 审批配置
      approverEmplyessList: [], // 已选择的人员 人员选择组件 默认值
      approverSearchName: '',
      roles: [], // 角色数据源
      roleList: [], // 选择的角色
      approverRoleSearchName: '', // 角色搜索
      copyerDrawer: false, // 抄送设置
      copyerVisible: false,
      copyerConfig: {}, // 抄送配置
      activeName: '1',
      copyerEmployessList: [], // 抄送人员
      copyerRoleList: [], // 抄送角色
      ccSelfSelectFlag: 0, // 自选抄送 暂时没用
      conditionDrawer: false, // 分支条件设置
      conditionVisible: false,
      conditionConfig: {}, // 分支条件配置
      conditionsConfig: { // 条件配置节点
        conditionNodes: []
      },
      bPriorityLevel: '', // 优先级
      conditions: [], // 分工条件配置
      conditionModel: 1,
      conditionList: [], // 条件
      conditionRoleSearchName: '',
      conditionDepartmentList: [],
      conditionEmployessList: [],
      conditionRoleList: [],
      // projects: [], // 项目
      currCondition: {},
      currColumn: {},
      choosePersonObj: 1, // 1 审核选择人员 2条件选择人员 3 分工条件选择人员
      financeDrawer: false,
      DivisionSchemes: [], // 分工方案
      divisionSchemesVisible: false,
      divisionSchemesConfig: {
        Id: '',
        Name: '',
        Condition: []
      },
      divisionSchemesConditionConfig: {},
      divisionSchemesConditionDrawer: false,
      divisionSchemesConditions: []
    }
  },
  watch: {
    currCondition: {
      handler(val) {
        if (val.conditionType === 1) {
          if (val.field.value && val.relation.value && val.value) {
            this.currCondition.error = false
          } else {
            this.currCondition.error = true
          }
        }
      },
      deep: true
    }
  },
  mounted() {
    if (this.nodeConfig.type === 1) {
      this.nodeConfig.error = !this.setApproverStr(this.nodeConfig)
    } else if (this.nodeConfig.type === 2) {
      this.nodeConfig.error = !this.copyerStr(this.nodeConfig)
    } else if (this.nodeConfig.type === 4) {
      for (var i = 0; i < this.nodeConfig.conditionNodes.length; i++) {
        this.nodeConfig.conditionNodes[i].error = this.conditionStr(this.nodeConfig.conditionNodes[i], i) === '请设置条件' && i !== this.nodeConfig.conditionNodes.length - 1
      }
    }
    // if (this.nodeConfig.settype === 8) {
    //   this.getUnitProject()
    // }
    if (this.nodeConfig.settype === 9) {
      this.nodeConfig.error = !this.setApproverStr(this.nodeConfig)
    }
    if (this.nodeConfig.settype === 12) {
      this.getUnitDivisionSchemes()
    }
  },
  methods: {
    getUnitRoles() {
      getUnitFlowRoles().then(res => {
        this.roles = res.Data
      })
    },
    // getUnitProject() {
    //   getUnitProject().then(res => {
    //     this.projects = res.Data
    //   })
    // },
    getUnitDivisionSchemes() {
      getDivisionSchemes().then(res => {
        this.DivisionSchemes = res.Data
      })
    },
    clickEvent(index) {
      if (index || index === 0) {
        this.$set(this.isInputList, index, true)
      } else {
        this.isInput = true
      }
    },
    blurEvent(index) {
      if (index || index === 0) {
        this.$set(this.isInputList, index, false)
        this.nodeConfig.conditionNodes[index].nodeName = this.nodeConfig.conditionNodes[index].nodeName ? this.nodeConfig.conditionNodes[index].nodeName : '条件'
      } else {
        this.isInput = false
        // this.nodeConfig.nodeName = this.nodeConfig.nodeName ? this.nodeConfig.nodeName : this.placeholderList[this.nodeConfig.type]
      }
    },
    conditionStr(item, index) {
      var { conditionList } = item
      if (conditionList.length > 0) {
        if (conditionList[0].Children.length > 0) {
          return '已配置条件'
        } else {
          return '请设置条件'
        }
      } else {
        return (index === this.nodeConfig.conditionNodes.length - 1) && this.nodeConfig.conditionNodes[0].conditionList.length !== 0 ? '其他条件进入此流程' : '请设置条件'
      }
    },
    conditionRowclick(row, column, event) {
      this.currCondition = row
      if (this.currCondition.conditionType === 1 && this.currCondition.field.value) {
        this.formData.forEach(column => {
          if (column.model === this.currCondition.field.value) {
            this.currColumn = column
            return
          }
        })
      } else {
        this.currColumn = {}
      }
    },
    addCondition() {
      if (!this.currCondition.id) {
        this.currCondition = (this.conditionDrawer && this.conditionConfig.conditionList[0]) || (this.divisionSchemesConditionDrawer && this.divisionSchemesConditions[0])
      }
      this.currCondition.Children.push({
        id: guidN(),
        conditionType: 1,
        field: '',
        relation: '',
        value: '',
        error: true,
        objtype: ''
      })
    },
    addConditionGroup() {
      if (!this.currCondition.id) {
        this.currCondition = this.conditionConfig.conditionList[0]
      }
      this.currCondition.Children.push({
        id: guidN(),
        conditionType: 2,
        relation: '&',
        Children: []
      })
    },
    removeCondition(row, rows) {
      rows.forEach(item => {
        if (item.id === row.id) {
          rows.splice(rows.indexOf(item), 1)
          return false
        }
        if (item.conditionType === 2) {
          this.removeCondition(row, item.Children)
        }
      })
    },
    conditionColumnChange(obj) {
      this.formData.forEach(column => {
        if (column.model === obj) {
          this.currColumn = column
          this.currCondition.field = { value: column.model, label: column.name }
          this.currCondition.relation = ''
          this.currCondition.objtype = column.objtype
          this.currCondition.value = ''
          this.currCondition.error = true
          return
        }
      })
    },
    verifyCondition(conditions) {
      var isPass = true
      if (conditions.length > 0) {
        conditions.forEach(condition => {
          if (condition.conditionType === 2) {
            isPass = this.verifyCondition(condition.Children)
          } else {
            if (condition.error) {
              isPass = false
            }
          }
        })
      } else {
        isPass = false
      }
      return isPass
    },
    closeConditionDrawer() {
      this.$confirm('此操作将无法保存该条件, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.conditionDrawer = false
        this.currCondition = {}
      }).catch(() => {
        // this.$message({
        //   type: 'info',
        //   message: '已取消删除'
        // })
      })
    },
    choosePerson() {
      this.choosePersonObj = 2
      this.approverEmplyessList = []
      for (var i = 0; i < this.currCondition.value.length; i++) {
        var { value, label } = this.currCondition.value[i]
        this.approverEmplyessList.push({
          Name: label,
          Type: 1,
          Id: value
        })
      }
      setTimeout(() => {
        this.$refs.selectPersonDialog.showSelectPersonDialog()
      }, 300)
    },
    chooseDepart() {
      this.conditionDepartmentList = []
      for (var i = 0; i < this.currCondition.value.length; i++) {
        var { value, label } = this.currCondition.value[i]
        this.conditionDepartmentList.push({
          Name: label,
          Type: 2,
          Id: value
        })
      }
      setTimeout(() => {
        this.$refs.selectdepartmentdialog.showSelectDepartmentDialog()
      }, 300)
    },
    departChooseBack(backData) {
      this.currCondition.value = []
      console.log('backData', backData)
      backData.map(item => {
        this.currCondition.value.push({
          value: item.Id,
          label: item.OrgName
        })
      })
    },
    saveCondition() {
      if (this.conditionConfig.conditionModel === 1 && !this.verifyCondition(this.conditionConfig.conditionList)) {
        this.$message({
          message: '条件设置不完整',
          type: 'error',
          duration: 3 * 1000
        })
        return false
      }
      this.conditionDrawer = false
      var a = this.conditionsConfig.conditionNodes.splice(this.bPriorityLevel - 1, 1)// 截取旧下标
      this.conditionsConfig.conditionNodes.splice(this.conditionConfig.priorityLevel - 1, 0, a[0])// 填充新下标
      this.conditionsConfig.conditionNodes.map((item, index) => {
        item.priorityLevel = index + 1
      })
      for (var i = 0; i < this.conditionsConfig.conditionNodes.length; i++) {
        this.conditionsConfig.conditionNodes[i].error = this.conditionStr(this.conditionsConfig.conditionNodes[i], i) === '请设置条件' && i !== this.conditionsConfig.conditionNodes.length - 1
      }
      this.$emit('update:nodeConfig', this.conditionsConfig)
      this.currCondition = {}
    },
    filterRole() {
      if (this.approverRoleSearchName) {
        this.roles = this.roles.filter(item => item.RoleName.indexOf(this.approverRoleSearchName) > -1)
      } else {
        this.getUnitRoles()
      }
    },
    addCopyer() {
      this.copyerEmployessList = []
      for (var i = 0; i < this.copyerConfig.nodeUserList.length; i++) {
        var { targetId, name, type } = this.copyerConfig.nodeUserList[i]
        this.copyerEmployessList.push({
          Name: name,
          Type: type,
          Id: targetId
        })
      }
      this.$refs.selectallinonedialog.showSelectAllInOneDialog()
    },
    sureCopyer(users) {
      this.copyerConfig.nodeUserList = []
      users.map(item => {
        this.copyerConfig.nodeUserList.push({
          type: item.Type,
          targetId: item.Id,
          name: item.Name
        })
      })
    },
    saveCopyer() {
      this.copyerConfig.error = !this.copyerStr(this.copyerConfig)
      this.$emit('update:nodeConfig', this.copyerConfig)
      this.copyerDrawer = false
    },
    copyerStr(nodeConfig) {
      if (nodeConfig.nodeUserList.length !== 0) {
        return this.arrToStr(nodeConfig.nodeUserList)
      } else {
        return ''
      }
    },
    changeRange(val) {
      this.approverConfig.nodeUserList = []
    },
    changeType(val) {
      this.approverConfig.nodeUserList = []
      this.approverConfig.examineMode = 1
      this.approverConfig.noHanderAction = 2
      if (val === 2) {
        this.approverConfig.directorLevel = 1
      } else if (val === 4) {
        this.approverConfig.selectMode = 1
        this.approverConfig.selectRange = 1
      } else if (val === 7) {
        this.approverConfig.examineEndDirectorLevel = 1
      // } else if (val === 8) {
      //   this.getUnitProject()
      } else if (val === 12) {
        this.getUnitDivisionSchemes()
      }
    },
    addRoleApprover() {
      this.approverRoleVisible = true
      this.approverRoleSearchName = ''
      this.getUnitRoles()
      this.roleList = []
      for (var i = 0; i < this.approverConfig.nodeUserList.length; i++) {
        var { name, targetId } = this.approverConfig.nodeUserList[i]
        this.roleList.push({
          Name: name,
          Id: targetId
        })
      }
    },
    chooseUser(users) {
      this.approverConfig.nodeUserList = []
      // if (users && users.length > 0) {
      if (this.choosePersonObj === 2) {
        this.currCondition.value = []
        users.map(item => {
          this.currCondition.value.push({
            value: item.Id,
            label: item.Name
          })
        })
      } else if (this.choosePersonObj === 3) {
        this.divisionSchemesConditionConfig.users = []
        users.map(item => {
          this.divisionSchemesConditionConfig.users.push({
            id: item.Id,
            name: item.Name
          })
        })
      } else {
        users.map(item => {
          this.approverConfig.nodeUserList.push({
            type: 2,
            targetId: item.Id,
            name: item.Name
          })
        })
      }
      // }
    },
    sureApprover() {
      this.approverConfig.nodeUserList = []
      if ((this.approverConfig.settype === 4 && this.approverConfig.selectRange === 3) || this.approverConfig.settype === 9) {
        this.roleList.map(item => {
          this.approverConfig.nodeUserList.push({
            type: 3,
            targetId: item.Id,
            name: item.Name
          })
        })
        this.approverRoleVisible = false
      }
    },
    setApproverStr(nodeConfig) {
      if (nodeConfig.settype === 1) {
        if (nodeConfig.nodeUserList.length === 1) {
          return nodeConfig.nodeUserList[0].name
        } else if (nodeConfig.nodeUserList.length > 1) {
          if (nodeConfig.examineMode === 1) {
            return this.arrToStr(nodeConfig.nodeUserList)
          } else if (nodeConfig.examineMode === 2) {
            return nodeConfig.nodeUserList.length + '人会签'
          }
        }
      } else if (nodeConfig.settype === 2) {
        const level = nodeConfig.directorLevel === 1 ? '直接主管' : '第' + nodeConfig.directorLevel + '级主管'
        if (nodeConfig.examineMode === 1) {
          return level
        } else if (nodeConfig.examineMode === 2) {
          return level + '会签'
        }
      } else if (nodeConfig.settype === 4) {
        if (nodeConfig.selectRange === 1) {
          return '发起人自选'
        } else {
          if (nodeConfig.nodeUserList.length > 0) {
            if (nodeConfig.selectRange === 2) {
              return '发起人自选'
            } else {
              return '发起人从' + nodeConfig.nodeUserList[0].name + '中自选'
            }
          } else {
            return ''
          }
        }
      } else if (nodeConfig.settype === 5) {
        return '发起人自己'
      } else if (nodeConfig.settype === 7) {
        return '从直接主管到通讯录中级别最高的第' + nodeConfig.examineEndDirectorLevel + '个层级主管'
      } else if (nodeConfig.settype === 8) {
        var cproject = this.projects.filter(item => item.Id === nodeConfig.selectProject)
        return cproject.length > 0 ? '项目' + cproject[0].ProjectName + '负责人' : '请选择'
      } else if (nodeConfig.settype === 9) {
        return nodeConfig.nodeUserList.length > 0 ? nodeConfig.nodeUserList[0].name : ''
      } else if (nodeConfig.settype === 10) {
        var title = '填单人'
        switch (this.schemeType) {
          case 1:
            title = '申请人'
            break
          case 2:
            title = '报销人'
            break
          case 3:
            title = '借款人'
            break
          case 4:
            title = '承担人'
            break
        }
        title = nodeConfig.selectBill === 'createuser' ? '填单人' : title
        return '流程上的' + title
      } else if (nodeConfig.settype === 11) {
        return '全部出纳'
      } else if (nodeConfig.settype === 12) {
        return nodeConfig.divisionSchemeId === '' ? '' : '按职责分工'
      }
    },
    saveApprover() {
      if (this.approverConfig.nodeName.length < 1) {
        this.$message({
          type: 'error',
          message: '请填写节点名称'
        })
        return
      }
      this.approverConfig.error = !this.setApproverStr(this.approverConfig)
      this.$emit('update:nodeConfig', this.approverConfig)
      this.approverDrawer = false
    },
    saveFinance() {
      this.approverConfig.error = !this.setApproverStr(this.approverConfig)
      this.$emit('update:nodeConfig', this.approverConfig)
      this.financeDrawer = false
    },
    arrToStr(arr) {
      if (arr) {
        return arr.map(item => { return item.name }).toString()
      }
    },
    toggleStrClass(item, key) {
      const a = item.zdy1 ? item.zdy1.split(',') : []
      return a.some(item => { return item === key })
    },
    toggleClass(arr, elem, key = 'id') {
      return arr.some(item => { return item[key] === elem[key] })
    },
    toChecked(arr, elem, key = 'id') {
      var isIncludes = this.toggleClass(arr, elem, key)
      !isIncludes ? arr.push(elem) : this.removeEle(arr, elem, key)
    },
    removeEle(arr, elem, key = 'id') {
      var includesIndex
      arr.map((item, index) => {
        if (item[key] === elem[key]) {
          includesIndex = index
        }
      })
      arr.splice(includesIndex, 1)
    },
    // getDepartmentList(parentId = 0) {
    //   this.$axios.get(`${process.env.BASE_URL}departments.json?parentId=${parentId}`).then(res => {
    //     this.departments = res.data
    //   })
    // },
    delNode() {
      this.$emit('update:nodeConfig', this.nodeConfig.childNode)
    },
    addTerm() {
      const len = this.nodeConfig.conditionNodes.length + 1
      this.nodeConfig.conditionNodes.push({
        'pkid': guidN(),
        'nodeName': '条件' + len,
        'type': 3,
        'priorityLevel': len,
        'conditionList': [],
        'conditionModel': 1,
        'nodeUserList': [],
        'childNode': null
      })
      for (var i = 0; i < this.nodeConfig.conditionNodes.length; i++) {
        this.nodeConfig.conditionNodes[i].error = this.conditionStr(this.nodeConfig.conditionNodes[i], i) === '请设置条件' && i !== this.nodeConfig.conditionNodes.length - 1
      }
      this.$emit('update:nodeConfig', this.nodeConfig)
    },
    delTerm(index) {
      this.nodeConfig.conditionNodes.splice(index, 1)
      for (var i = 0; i < this.nodeConfig.conditionNodes.length; i++) {
        this.nodeConfig.conditionNodes[i].error = this.conditionStr(this.nodeConfig.conditionNodes[i], i) === '请设置条件' && i !== this.nodeConfig.conditionNodes.length - 1
      }
      this.$emit('update:nodeConfig', this.nodeConfig)
      if (this.nodeConfig.conditionNodes.length === 1) {
        if (this.nodeConfig.childNode) {
          if (this.nodeConfig.conditionNodes[0].childNode) {
            this.reData(this.nodeConfig.conditionNodes[0].childNode, this.nodeConfig.childNode)
          } else {
            this.nodeConfig.conditionNodes[0].childNode = this.nodeConfig.childNode
          }
        }
        this.$emit('update:nodeConfig', this.nodeConfig.conditionNodes[0].childNode)
      }
    },
    reData(data, addData) {
      if (!data.childNode) {
        data.childNode = addData
      } else {
        this.reData(data.childNode, addData)
      }
    },
    setPerson(priorityLevel) {
      var { type } = this.nodeConfig
      if (type === 0) {
        this.approverDrawer = true
        this.approverConfig = JSON.parse(JSON.stringify(this.nodeConfig))
        this.approverConfig.settype = 0
      } else if (type === 1) {
        this.approverDrawer = true
        this.approverConfig = JSON.parse(JSON.stringify(this.nodeConfig))
        this.approverConfig.settype = this.approverConfig.settype ? this.approverConfig.settype : 1
      } else if (type === 2) {
        this.copyerDrawer = true
        this.copyerConfig = JSON.parse(JSON.stringify(this.nodeConfig))
        // this.ccSelfSelectFlag = this.copyerConfig.ccSelfSelectFlag === 0 ? [] : [this.copyerConfig.ccSelfSelectFlag]
      } else if (type === 5) {
        this.approverDrawer = true
        this.approverConfig = JSON.parse(JSON.stringify(this.nodeConfig))
        this.approverConfig.settype = this.approverConfig.settype ? this.approverConfig.settype : 1
      } else if (type === 6) {
        this.financeDrawer = true
        this.approverConfig = JSON.parse(JSON.stringify(this.nodeConfig))
        this.approverConfig.settype = this.approverConfig.settype ? this.approverConfig.settype : 1
      } else if (type === 7) {
        this.financeDrawer = true
        this.approverConfig = JSON.parse(JSON.stringify(this.nodeConfig))
        this.approverConfig.settype = this.approverConfig.settype ? this.approverConfig.settype : 11
      } else {
        this.conditionDrawer = true
        this.bPriorityLevel = priorityLevel
        this.conditionsConfig = JSON.parse(JSON.stringify(this.nodeConfig))
        this.conditionConfig = this.conditionsConfig.conditionNodes[priorityLevel - 1]
        if (!this.conditionConfig.conditionList || this.conditionConfig.conditionList.length < 1) {
          this.conditionConfig.conditionList = [{
            id: guidN(),
            conditionType: 2,
            field: '',
            relation: '&',
            value: '',
            Children: [],
            error: true
          }]
        }
        // this.currCondition = this.conditionConfig.conditionList[0]
      }
    },
    arrTransfer(index, type = 1) { // 向左-1,向右1
      this.nodeConfig.conditionNodes[index] = this.nodeConfig.conditionNodes.splice(index + type, 1, this.nodeConfig.conditionNodes[index])[0]
      this.nodeConfig.conditionNodes.map((item, index) => {
        item.priorityLevel = index + 1
      })
      for (var i = 0; i < this.nodeConfig.conditionNodes.length; i++) {
        this.nodeConfig.conditionNodes[i].error = this.conditionStr(this.nodeConfig.conditionNodes[i], i) === '请设置条件' && i !== this.nodeConfig.conditionNodes.length - 1
      }
      this.$emit('update:nodeConfig', this.nodeConfig)
    },
    showSelectPersonDialog() {
      this.choosePersonObj = 1
      this.approverEmplyessList = []
      for (var i = 0; i < this.approverConfig.nodeUserList.length; i++) {
        var { name, targetId } = this.approverConfig.nodeUserList[i]
        this.approverEmplyessList.push({
          Name: name,
          Type: 2,
          Id: targetId
        })
      }
      setTimeout(() => {
        this.$refs.selectPersonDialog.showSelectPersonDialog()
      }, 300)
    },
    showDivisionSchemeDialog(t) {
      // t 0 新增 1 编辑
      this.divisionSchemesVisible = true
      if (t === 0) {
        this.divisionSchemesConfig = { Id: '', Name: '', Condition: [] }
        this.divisionSchemesConfig.Condition.push({
          id: guidN(),
          name: '默认分工',
          conditions: [],
          users: [],
          isDefault: 1
        })
      } else {
        this.DivisionSchemes.forEach(ds => {
          if (ds.Id === this.approverConfig.divisionSchemeId) {
            this.divisionSchemesConfig = Object.assign({}, ds)
            this.divisionSchemesConfig.Condition = JSON.parse(this.divisionSchemesConfig.Condition)
            return
          }
        })
      }
    },
    delDivisionScheme() {
      this.$confirm('确定删除选中的分工方案吗?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        delDivisionScheme(this.approverConfig.divisionSchemeId).then(res => {
          this.$message({
            type: 'success',
            message: '已删除'
          })
          this.getUnitDivisionSchemes()
        })
      }).catch(() => {
        // this.$message({
        //   type: 'info',
        //   message: '已取消删除'
        // })
      })
    },
    addDivisionSchemeCondition() {
      this.divisionSchemesConfig.Condition.push({
        id: guidN(),
        name: '未命名分工',
        conditions: [],
        users: [],
        isDefault: 0
      })
    },
    setDivisionSchemesConditions(row) {
      this.divisionSchemesConditionConfig = row
      this.divisionSchemesConditions = row.conditions
      if (this.divisionSchemesConditions.length < 1) {
        this.divisionSchemesConditions = [{
          id: guidN(),
          conditionType: 2,
          field: '',
          relation: '&',
          value: '',
          Children: [],
          error: true
        }]
      }
      this.divisionSchemesConditionDrawer = true
    },
    chooseDivisionSchemesUser(row) {
      this.divisionSchemesConditionConfig = row
      this.choosePersonObj = 3
      this.approverEmplyessList = []
      for (var i = 0; i < this.divisionSchemesConditionConfig.users.length; i++) {
        var { id, name } = this.divisionSchemesConditionConfig.users[i]
        this.approverEmplyessList.push({
          Name: name,
          Type: 1,
          Id: id
        })
      }
      setTimeout(() => {
        this.$refs.selectPersonDialog.showSelectPersonDialog()
      }, 300)
    },
    sureDivisionSchemes() {
      this.$refs.divisionSchemeForm.validate(valid => {
        if (valid) {
          var isPass = true
          this.divisionSchemesConfig.Condition.forEach(item => {
            if (item.users.length < 1) {
              this.$message({
                message: '"' + item.name + '"请选择执行人',
                type: 'error',
                duration: 3 * 1000
              })
              isPass = false
              return false
            } else if (item.isDefault === 0 && item.conditions.length < 1) {
              this.$message({
                message: '"' + item.name + '"请配置条件',
                type: 'error',
                duration: 3 * 1000
              })
              isPass = false
              return false
            }
          })
          if (isPass) {
            var dsData = Object.assign({}, this.divisionSchemesConfig)
            dsData.Condition = JSON.stringify(dsData.Condition)
            editDivisionSchemes(dsData).then(res => {
              this.$message({
                type: 'success',
                message: '操作成功'
              })
              this.divisionSchemesVisible = false
              this.getUnitDivisionSchemes()
            })
          }
        }
      })
    },
    closeDivisionSchemesConditionDrawer() {
      this.$confirm('此操作将无法保存该条件, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.divisionSchemesConditionDrawer = false
        this.currCondition = {}
      }).catch(() => {
        // this.$message({
        //   type: 'info',
        //   message: '已取消删除'
        // })
      })
    },
    saveDivisionSchemesCondition() {
      if (!this.verifyCondition(this.divisionSchemesConditions)) {
        this.$message({
          message: '条件设置不完整',
          type: 'error',
          duration: 3 * 1000
        })
        return false
      }
      this.divisionSchemesConditionDrawer = false
      this.currCondition = {}
      this.divisionSchemesConditionConfig.conditions = this.divisionSchemesConditions
    },
    removeDivisionSchemes(index) {
      this.$confirm('确实移除该分工吗?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.divisionSchemesConfig.Condition.splice(index, 1)
      }).catch(() => {

      })
    }
  }
}
</script>

<style>
.error_tip {
    position: absolute;
    top: 0px;
    right: 0px;
    transform: translate(150%, 0px);
    font-size: 24px;
}
.add-node-popover-body {
    display: flex;
}
.promoter_content {
    padding: 0 20px;
}
.condition_content .el-button,
.copyer_content .el-button,

.promoter_content .el-button,
.approver_content .el-button {
    margin-bottom: 20px;
}
.promoter_content p {
    padding: 18px 0;
    font-size: 14px;
    line-height: 20px;
    color: #000000;
}
.promoter_person .el-dialog__body {
    padding: 10px 20px 14px 20px;
}
.person_body {
    border: 1px solid #f5f5f5;
    height: 500px;
}
.person_tree {
    padding: 10px 12px 0 8px;
    width: 280px;
    height: 100%;
    border-right: 1px solid #f5f5f5;
}
.person_tree input {
    padding-left: 22px;
    width: 210px;
    height: 30px;
    font-size: 12px;
    border-radius: 2px;
    border: 1px solid #d5dadf;
    background: url(~@/assets/images/list_search.png) no-repeat 10px center;
    background-size: 14px 14px;
    margin-bottom: 14px;
}
.tree_nav span {
    display: inline-block;
    padding-right: 10px;
    margin-right: 5px;
    max-width: 6em;
    color: #38adff;
    font-size: 12px;
    cursor: pointer;
    background: url(~@/assets/images/jiaojiao.png) no-repeat right center;
}
.tree_nav span:last-of-type {
    background: none;
}
.person_tree ul,
.has_selected ul {
    height: 420px;
    overflow-y: auto;
}
.person_tree li {
    padding: 5px 0;
}
.person_tree li i {
    float: right;
    padding-left: 24px;
    padding-right: 10px;
    color: #3195f8;
    font-size: 12px;
    cursor: pointer;
    background: url(~@/assets/images/next_level_active.png) no-repeat 10px
        center;
    border-left: 1px solid rgb(238, 238, 238);
}
.person_tree li a.active + i {
    color: rgb(197, 197, 197);
    background-image: url(~@/assets/images/next_level.png);
    pointer-events: none;
}
.person_tree img {
    width: 14px;
    vertical-align: middle;
    margin-right: 5px;
}
.has_selected {
    width: 276px;
    height: 100%;
    font-size: 12px;
}
.has_selected ul {
    height: 460px;
}
.has_selected p {
    padding-left: 19px;
    padding-right: 20px;
    line-height: 37px;
    border-bottom: 1px solid #f2f2f2;
}
.has_selected p a {
    float: right;
}
.has_selected ul li {
    margin: 11px 26px 13px 19px;
    line-height: 17px;
}
.has_selected li span {
    vertical-align: middle;
}
.has_selected li img:first-of-type {
    width: 14px;
    vertical-align: middle;
    margin-right: 5px;
}
.has_selected li img:last-of-type {
    float: right;
    margin-top: 2px;
    width: 14px;
}
el-radio-group {
    padding: 20px 0;
}
.drawer-title{
  font-weight: bold;
  font-size: 14px;
  margin: 10px 0;
  line-height: 30px;
}

.approver_content .el-radio,
.approver_some .el-radio,
.approver_self_select .el-radio {
    width: 27%;
    margin-bottom: 10px;
}
.copyer_content .el-checkbox {
    margin-bottom: 20px;
}
/* .el-checkbox__label {
    font-size: 12px;
} */
.condition_content,
.copyer_content,
.approver_self_select,

/* .approver_some {
     padding: 20px 20px 0;
} */
.approver_content{
    padding: 0;

}
.approver_manager p:first-of-type,
.approver_some p {
    line-height: 19px;
    font-size: 14px;
    margin-bottom: 14px;
}

.approver_manager p {
    line-height: 32px;
}
.approver_manager select {
    width: 420px;
    height: 32px;
    background: rgba(255, 255, 255, 1);
    border-radius: 4px;
    border: 1px solid rgba(217, 217, 217, 1);
}
.approver_manager p.tip {
    margin: 10px 0 22px 0;
    font-size: 12px;
    line-height: 16px;
    color: #f8642d;
}

.approver_detail{
  margin-left:20px;
background: #f4f8fd;
  border-radius: 5px;
  padding:10px;
  box-shadow:0  -2px 8px #ccc;

}
.caret{
  position: absolute;
    margin-top:-20px;
    color:#f4f8fd;
  }
.approver_self {
    padding: 28px 20px;
}
.selected_list {
  margin-top:10px;
    margin-bottom:10px;
    line-height: 30px;
    border:1px solid #eee;
    border-radius: 5px;
    padding:10px;
    background-color: #fff;
}
.selected_list span {
    margin-right: 10px;
    padding: 3px 6px 3px 9px;
    line-height: 12px;
    white-space: nowrap;
    border-radius: 2px;
    /* border: 1px solid rgba(220, 220, 220, 1); */
}
.selected_list img {
    margin-left: 5px;
    width: 7px;
    height: 7px;
    cursor: pointer;
}
.approver_self_select h3 {
    margin: 5px 0 20px;
    font-size: 14px;
    font-weight: bold;
    line-height: 19px;
}
.condition_copyer .el-drawer__body select {
    position: absolute;
    top: 11px;
    right: 30px;
    width: 100px;
    height: 32px;
    background: rgba(255, 255, 255, 1);
    border-radius: 4px;
    border: 1px solid rgba(217, 217, 217, 1);
}
.condition_content p.tip {
    margin: 20px 0;
    width: 510px;
    text-indent: 17px;
    line-height: 45px;
    background: rgba(241, 249, 255, 1);
    border: 1px solid rgba(64, 163, 247, 1);
    color: #46a6fe;
    font-size: 14px;
}
.condition_content ul {
    max-height: 500px;
    overflow-y: scroll;
    margin-bottom: 20px;
}
.condition_content li > span {
    float: left;
    margin-right: 8px;
    width: 70px;
    line-height: 32px;
    text-align: right;
}
.condition_content li > div {
    display: inline-block;
    width: 370px;
}
.condition_content li:not(:last-child) > div > p {
    margin-bottom: 20px;
}
.condition_content li > div > p:not(:last-child) {
    margin-bottom: 10px;
}
.condition_content li > a {
    float: right;
    margin-right: 10px;
    margin-top: 7px;
}
.condition_content li select,
.condition_content li input {
    width: 100%;
    height: 32px;
    background: rgba(255, 255, 255, 1);
    border-radius: 4px;
    border: 1px solid rgba(217, 217, 217, 1);
}
.condition_content li select + input {
    width: 260px;
}
.condition_content li select {
    margin-right: 10px;
    width: 100px;
}
.condition_content li p.selected_list {
    padding-left: 10px;
    border-radius: 4px;
    min-height: 32px;
    border: 1px solid rgba(217, 217, 217, 1);
}
.condition_content li p.check_box {
    line-height: 32px;
}
.condition_list .el-dialog__body {
    padding: 16px 26px;
}
.condition_list p {
    color: #666666;
    margin-bottom: 10px;
}
.condition_list p.check_box {
    margin-bottom: 0;
    line-height: 36px;
}
</style>
<style lang="scss" scoped>
.node-wrap-box .content{
  padding: 16px 10px;
}
.el-table__placeholder{
  width: 0;
}
.close,.node-wrap-box .close{
  display: none;

   position: absolute;
   top: 16px;
    right: 10px;
    margin: -20px -15px;
    color: rgb(97, 95, 95);
}
td:hover .close{
  display: block;

}
::v-deep.el-table .cell:last-child{
  text-align: center;
}
</style>
